


How to Make a "Choose Your Own Adventure" Fic

by La_Temperanza



Series: AO3 Work Skins/Tutorials [16]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: Completed
Published: 2017-07-17
Updated: 2017-07-17
Packaged: 2018-12-02 18:01:27
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,769
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/11514573
Author URL: https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza
Summary: This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (seehere), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.





	How to Make a "Choose Your Own Adventure" Fic

It's late.

Like really late. Like you should've been in bed hours ago already late. You know you have an early morning tomorrow; you've set multiple alarms just to make sure you'll get up in time.

And yet.

You spare a glance at your phone, your thumb hovering over the AO3 bookmark in your browser.

To roll over and get some sleep, click here.  
To pull up some fanfiction, click here.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Yeah, probably for the best, huh? Can you imagine trying to explain you stayed up late just to read fanfiction? That's...awkward.

You drop your phone and pull the covers over your head. You can read tomorrow. Maybe.

**THE END**

  
  
  
Restart?

 

 

 

 

 

 

 

 

 

 

Sleep is for the weak, amirite?

You pull up the site and go to your fandom of choice. You scroll through, searching through all the summaries, when you see... _it_.

Your OTP? Enemies to Friends to Lovers? With Hurt/Comfort? _Bed-sharing?_

Heck. Yes.

Problem is, it's 100k. Do you really want to start something so epic tonight?

  
  
To read the epic fic, click here.  
To look for something shorter, click here.  
To give up and go to sleep, click here.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

There's no way you're going to pass this up now. You click on the link and immediately get engrossed in the story, even as your vision starts to blur from exhausation.

By the time you reach the ending (happily wrapped up, swoon~ <3) and left a comment gushing to the author (you did leave a comment, didn't you?), your first alarm is blaring out. Welp, you're screwed.

(No regrets though.)

**THE END**

  
  
Restart?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You bookmark the epic fic for later with a heavy sigh. But hey, it's okay! You find a ficlet that's under 5k, a Slice of Life story.

It's cute. It's fluffy. It makes you smile as you drift off to sleep.

You can almost forgive it for the epithet usage.

(Almost)

**THE END**

  
  
Restart?

# HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "[Create Work Skin](http://archiveofourown.org/skins/new?skin_type=WorkSkin)". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to put the following:
    
    
    #workskin .storycontainer {
      margin: 0 auto;
      overflow: hidden;
      width: 100%;
      height: 300px;
    }
    
    #workskin .page {
    margin-top: 25px;
      height: 250px;
      overflow-y: auto;
    }
    
    #workskin .page::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    
    #workskin .page::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .page::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .page::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      border: 2px solid #ffffff;
    }
    
    #workskin .page::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #ffffff;
    }

Hit "Submit" (or "Update" if adding to a previous work skin), and now to implement it in your work.

Go to your the work where you want to use the skin , and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and the basic code is the following:

<div class="storycontainer">  
<div class="page"><p><a name="pageone" id="pageone"></a>PAGE ONE</p>  
  
<p><a href="#pagetwo">Link to page two</a><br>  
<a href="#pagethree">Link to page three</a></p></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  
<div class="page"><p><a name="pagetwo" id="pagetwo"></a>PAGE TWO</P>  
<p><a href="#pageone">Back to page one</a></p></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  
<div class="page"><a name="pagethree" id="page"></a><p>PAGE THREE</p>  
<p><a href="#pageone">Back to page one</a></p></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>

Which gives us this:

PAGE ONE

Link to page two  
Link to page three

PAGE TWO

Back to page one

PAGE THREE

Back to page one

There's multiple things to consider with this, so let me break down each individually:

  1. The linking method between the different parts is created with anchor links. Now, if you've used my [linked footnotes tutorial](http://teekettle.tumblr.com/post/126920988304/live-example-my-ao3-skins-while-ao3-has-a) before, you should already be familar with them. If you aren't, quite simply anchor links let you link to anchors you've put in your text. Like if we look at the example above: **< a name="pageone" id="pageone">**</a>PAGE ONE<br> where <a name="pageone" id="pageone"> is our anchor for page one. If we wanted to link to it, we simply use **< a href="#pageone">[LINK TEXT HERE]</a>**
  2. If you want multiple paragraphs on a page, you should be able to simply hit the Enter/Return key and expect AO3 to format it like usual. The reason I showed the <br> coding is to make sure you have enough spaces between each page so they don't show up on top of one another. Also, if the [creator's style](http://archiveofourown.org/works/11514573?style=disable) is turned off, the pages are spaced far apart so that they're not immediately seen by the reader. 
  3. You can write as short or as long of pages that you want. If your text won't fit in the container, scrollbars will automatically become available so that the entire text will become accessible. These scrollbars will not be normally visible on mobile, which is why I added coding to force a visible scrollbar on mobile. HOWEVER, doing so meant that the scrollbars colors had to be determined, so if your reader is using a dark site skin, the white and gray scrollbar is going to stand out. Not a huge thing, but still wanted to point it out nevertheless. 
  4. This is the most basic of designs, but yes, you could spruce it up a little to make it more stylized if you'd like. I've included some examples below.



>> Greetings cadet. Are you ready to start your training simulation for the day?

<< Login  
<< Quit Interface

>> All systems are offline at this time.

>> I'm afraid I can't do that, Dave. 

>> Kidding. Just a little bit of AI humor. Ha. Ha. Ha.

 **Workskin:**
    
    
    #workskin .computerscreen {
      margin: 0 auto;
      overflow: hidden;
      width: 75%;
      height: 300px;
      background-color: #000;
      color: #FFF;
      font-family: "fixedsys", Monaco, monospace;
      border-radius: 25px;
      background: radial-gradient(#09236b, #041851, #000);
    }
    
    #workskin .computerscreen a,
    #workskin .computerscreen a:visited {
      color: #fff;
    }
    
    #workskin .computerscreen a:hover {
      color: #0b40c4;
    }
    
    #workskin .login {
      margin-top: 25px;
      height: 250px;
      overflow-y: auto;
      padding: 10px;
    }
    
    #workskin .login::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    
    #workskin .login::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .login::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .login::-webkit-scrollbar-thumb {
      background-color: #fff;
      border-radius: 10px;
      border: 2px solid #000;
    }
    
    #workskin .login::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #000;
    }
    
    

You wake up, confused and disoriented. You have no idea where you are or long you've been here. What's worse is that it's completely dark.

You grapple at the walls blindly and find a lightswitch.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You blink rapidly as the entire room is bathed in a bright light. There, that's much better. Now to take note of your surroundings.

 **Workskin:**
    
    
    #workskin .lightsout {
      margin: 0 auto;
      overflow: hidden;
      width: 100%;
      height: 300px;
    }
    
    #workskin .dark {
      margin-top: 25px;
      height: 250px;
      overflow-y: auto;
      background-color: #000;
      color: #848484;
    padding: 5px;
    }
    
    #workskin .dark a {
      color: #848484;
    }
    
    #workskin .dark::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    
    #workskin .dark::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .dark::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .dark::-webkit-scrollbar-thumb {
      background-color: #848484;
      border-radius: 10px;
      border: 2px solid #000;
    }
    
    #workskin .dark::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #000;
    }
    
    #workskin .light {
      margin-top: 25px;
      height: 250px;
      overflow-y: auto;
      background-color: #FFF;
      color: #000;
    padding: 5px;
    }
    
    #workskin .light a {
      color: #000;
    }
    
    #workskin .light::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    
    #workskin .light::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .light::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .light::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      border: 2px solid #ffffff;
    }
    
    #workskin .light::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #ffffff;
    }

Notice we change the background from dark to light (to emulate the light being "switched" on), which means we can't use "dark" again unless we put the character back in the dark. So you would use "light" for the rest of the div from that point out.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec quam aliquet magna egestas vehicula. Nunc quis ullamcorper dui. Donec ornare velit in dignissim porttitor. Nullam a porttitor felis. Praesent congue pharetra volutpat. Aliquam consectetur iaculis dui, eget consequat erat semper id. Proin venenatis orci diam, ut venenatis mi luctus sed. Aliquam varius dignissim sodales. Maecenas volutpat tincidunt nulla et accumsan. Fusce euismod justo dictum libero tincidunt, ac pulvinar lectus dignissim.

Quisque pulvinar dapibus lectus non iaculis. Vivamus diam lacus, pellentesque aliquam vulputate in, molestie sit amet magna. Quisque rutrum, lectus eu suscipit lacinia, nulla elit vehicula quam, in fringilla ligula orci et turpis. Morbi suscipit molestie ultrices. Donec purus nisi, pellentesque id tincidunt sed, molestie nec diam. Mauris vulputate vel urna vel consectetur. Nunc luctus lectus justo, eget commodo lectus ultricies vel. Sed vel elementum diam. Sed mattis at elit eu tristique.

Morbi sollicitudin viverra nunc ut congue. Etiam eu dapibus massa. Nunc est risus, scelerisque eget vehicula vel, vehicula at neque. Proin vestibulum diam quis rhoncus ultrices. Donec tortor elit, consectetur sit amet orci a, aliquet dapibus purus. Nulla sodales egestas magna, sagittis tincidunt enim elementum ac. Integer a aliquet est. Curabitur tempus id arcu vitae dictum.

[Not real links, sorry]  
[Go to page 7]()  
[Go to page 13]()

 **Workskin:**
    
    
    #workskin .book {
      background-color: #f2f2f2;
      color: #000;
      width: 75%;
      margin: 0 auto;
      overflow: hidden;
      height: 400px;
      box-shadow: 1px 0 1px rgba(89, 71, 8,0.15), 10px 0 0 -5px #e5e5e5, 10px 0 1px -4px rgba(89, 71, 8,0.15), 20px 0 0 -10px #e5e5e5, 20px 0 1px -9px rgba(89, 71, 8,0.15);
      padding: 0;
    }
    
    #workskin .book a {
      color: #848484;
    }
    
    #workskin .bookpage {
      text-align: justify;
      overflow-y: auto;
      margin-top: 0px;
      margin-right: 15px;
      margin-left: 15px;
      height: 375px;
    }
    
    #workskin .bookpage::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    
    #workskin .bookpage::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .bookpage::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .bookpage::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      border: 2px solid #f2f2f2;
    }
    
    #workskin .bookpage::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #f2f2f2;
    }

I'm sure there's more that can be done with this (Twine/otome games anyone? I'm almost positive you can use images in here), but I didn't want to overwhelm anyone! And as always, if you have any questions or concerns, feel free to leave a comment here or send me an ask at [to-skin-a-fic.tumblr.com](http://to-skin-a-fic.tumblr.com/)


End file.
